<template>
<div class="content">
  <div class="content-block">
    <div class="info-block">
      <div class="title-block">
        <div class="title">用户账户信息</div>
      </div>
      <div class="user-block" v-loading="infoLoading">
        <div class="user-title">
          <div class="title">使用者信息</div>
          <div class="text"></div>
        </div>
        <div class="user-name">
          <div class="name">姓名：{{info.com.realName}}</div>
          <div class="text">实名后同步更新，为保护您的隐私，我们将会以”**女士“或”**先生“作为职位发布人姓名。</div>
        </div>
        <div class="type-block">
          <div class="type-name">认证状态：</div>
          <div class="type"><i class="el-icon-success" style="color: #6aff0b"></i>实名认证已通过</div>
          <div class="type"><i class="el-icon-success" style="color: #6aff0b"></i>在职认证已通过</div>
        </div>
        <div class="img-block">
          <div class="img-title">头像：</div>
          <img :src="info.faceUrl" alt="" class="image">
        </div>

        <div class="sex-block">
          <div class="sex-name">职位：{{info.com.comPosition}}</div>
        </div>
        <div class="sex-block">
          <div class="sex-name">手机：{{info.mobile}}</div>
          <div class="text"> <i class="el-icon-success" style="color: #6aff0b"></i>已验证</div>
        </div>
        <div class="vx-block">
          <div class="wx-name">微信号：</div>
          <div class="text1">{{ info.weChat||'未填写' }}</div>
        </div>
        <div class="sex-block">
          <div class="sex-name">邮箱：</div>
          <div class="text1">{{ info.eml||'未填写' }}</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {getComRecruiters} from "@/api/enterprise";

export default {
  name: "Account",
  data(){
    return{
      infoLoading:false,
      info:{
        com:{
          realName:'',
          comPosition:'',
        },
        faceUrl:'',
        mobile:'',
        weChat:'',
      }
    }
  },
  methods:{
    getInfo(){
      this.infoLoading=true
      getComRecruiters({}).then((res)=>{
        this.info=res
      }).finally(()=>{
        this.infoLoading=false
      })
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  min-height: $fullMinHeight;
  .content-block{
    border-radius: 5px;
    width: 100%;
    background-color: #fff;
    .info-block{
      padding: 40px;
      .title-block{
        font-size: 24px;
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 30px;
      }
      .user-block{
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        .user-title{
          display: flex;
          flex-direction: row;
          align-items: flex-end;
          .title{
            font-weight: bold;
            font-size: 18px;
            margin-right: 15px;
          }
          .text{
            color: $darkGray;
            font-size: 16px;
          }
        }
        .user-name{
          display: flex;
          flex-direction: column;
          margin-top: 20px;
          .name{
            margin-left: 60px;
          }
          .text{
            margin-top: 20px;
            color: $darkGray;
            margin-left: 110px;
          }
        }
        .type-block{
          display: flex;
          flex-direction: row;
          margin-top: 30px;
          margin-left: 30px;
          .type{
            margin-right: 20px;
          }
        }
        .img-block{
          display: flex;
          flex-direction: row;
          margin-top: 30px;
          margin-left: 60px;
          align-items: center;
          .image{
            width: 90px;
            height: 90px;
            margin-right: 10px;
          }
        }
        .sex-block{
          display: flex;
          flex-direction: row;
          margin-top: 30px;
          margin-left: 60px;
          align-items: center;
          margin-right: 10px;
          .text{
            margin-left: 10px;
            color: $darkGray;
          }
        }
        .vx-block{
          display: flex;
          flex-direction: row;
          margin-top: 30px;
          margin-left: 60px;
          align-items: center;
          margin-right: 10px;
          .text-box{
            height: 30px;
          }
        }
      }
    }
  }
}
</style>
